@extends('layouts.system')

@section('css')

@endsection

@section('content')
    <div id="cl-wrapper" class="fixed-menu">
        <div class="container-fluid" id="pcont">
            <div class="col-md-12" style="padding-right: 0;">
                <div class="block-flat">
                    <div class="header">
                        <div class="pull-left">
                            <p class="jb_underline">任务管理&#62;&#62;我发布的任务</p>
                        </div>

                        <div class="pull-right">
                            <a href="/admin/task/lists" class="jb_underline">返回任务管理</a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="content">
                        <div class="table-responsive">
                            <div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="pull-left"
                                             style="background-color: #ddd; margin: 10px 0; padding:10px 50px;">
                                            <div id="datatable-icons_length" class="dataTables_length col-sm-2"
                                                 style="width: 150px;">
                                                <select size="1" v-model="type" class="form-control" @change="changeType">
                                                    <option value="label">标签</option>
                                                    <option value="title" selected="selected">任务名称</option>
                                                    <option value="state">状态</option>
                                                </select>
                                            </div>
                                            <div v-if="type=='label'" id="datatable-icons_length" class="dataTables_length col-sm-2"
                                                 style="width: 250px;">
                                                <select size="1" v-model="keyword" class="form-control">
                                                    <option value="1">互动</option>
                                                    <option value="2">体验</option>
                                                    <option value="3">分享</option>
                                                    <option value="4">游戏</option>
                                                    <option value="5">其它</option>
                                                </select>
                                            </div>
                                            <div v-if="type=='state'" id="datatable-icons_length" class="dataTables_length col-sm-2"
                                                 style="width: 250px;">
                                                <select size="1" v-model="keyword" class="form-control">
                                                    <option value="1">待批准</option>
                                                    <option value="2">被驳回</option>
                                                    <option value="3">发布中</option>
                                                    <option value="4">审核中</option>
                                                    <option value="4">已结束</option>
                                                </select>
                                            </div>
                                            <div v-if="type=='title' || type=='' " class="col-sm-2" style="width: 250px;">
                                                <input v-model="keyword" id="searchUserName" type="text" class="form-control"
                                                       placeholder="关键词">
                                            </div>
                                            <button type="button" v-on:click="search" class="btn btn-jianbei">
                                                搜索
                                            </button>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <table class="table table-bordered" id="datatable-icons">
                                    <thead style="background-color: #ffd866;">
                                    <tr>
                                        <th>任务ID</th>
                                        <th>任务名称</th>
                                        <th>标签</th>
                                        <th>创建时间</th>
                                        <th>发布时间</th>
                                        <th>截止时间</th>
                                        <th>审核时长</th>
                                        <th>发布数量</th>
                                        <th>已领数量</th>
                                        <th>状态</th>
                                        <th>发布者</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="item in lists">
                                        <td><span v-text="item.id"></span></td>
                                        <td><span v-text="item.title"></span></td>
                                        <td>
                                            <span style="margin-left: 3px">
                                                <b v-text="labels[item.label]"></b>
                                            </span>
                                        </td>
                                        <td><span v-text="item.created_at"></span></td>
                                        <td><span v-text="item.release_time"></span></td>
                                        <td><span v-text="item.deadlime"></span></td>
                                        <td><span v-text="item.hours"></span>小时</td>
                                        <td><span v-text="item.number"></span></td>
                                        <td><span v-text="item.used_nums"></span></td>
                                        <td><span v-text="states[item.state]"></span></td>
                                        <td><span v-text="item.username"></span></td>
                                        <td>
                                            <a v-bind:href="'/admin/task/show/' + item.id ">查看详情</a>
                                            <a v-bind:href="'/admin/task/edit/' + item.id ">编辑</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <div class="row">
                                    <div class="pull-right">
                                        <div class="page">
                                            <page :current="current" :total="total" show-total
                                                  show-elevator @on-change="changePage"></page>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">

      Vue.use(VueResource)
      var vm = new Vue({
        el: '#pcont',
        data: {
          current:1,
          total:0,
          type:'',
          keyword:'',
          labels: {},
          states: {},
          lists: {}
        },
        created: function () {
          getLists(this);
        },
        methods : {
          changePage: function (current) {
            this._data.current = current
            getLists(this);
          },
          search: function () {
            this._data.current = 1;
            getLists(this);
          },
          changeType: function () {
            this._data.keyword = ''
          }
        }
      })

      function getLists(_vm) {
        var params = {
          current: _vm._data.current,
          release_userid: {{$id}}
        }
        var conditions = {
          type :  _vm._data.type,
          keyword :  _vm._data.keyword
        }
        params = $.extend(params, conditions)
        _vm.$http.get('/admin/task/getLists',{params: params})
          .then(function (response) {
            var json = response.body;
            console.log('json:')
            console.log(json)
            if (json.state == 1) {
              _vm._data.lists = json.data.lists;
              _vm._data.total = json.data.total;
              _vm._data.labels = json.data.labels;
              _vm._data.states = json.data.states;
            }
            console.log('data:')
            console.log(_vm._data)

          })
          .catch(function (response) {
            console.log(response)
          })
      }

    </script>
@endsection